<template>
	<view>
		<view class="ek-card">
			<view>
				<view class="h1">{{ info.title }}</view>
				<view class="h3">{{ info.remark }}</view>
				<view class="h3">{{ info.start_time|formatDate }}</view>
				<view v-for="(sub, index) in info.child" :key="index" class="h2 flex jcsb">
					<view>座位号：
						<text class="ek-color-red">
							{{sub.area_number}}区{{ sub.row_number }}排{{ sub.code_number }}号
							<text v-if="sub.refund_status == 2">【已退款】</text>
						</text>
					</view>
					<view>￥{{ sub.price }}</view>
				</view>
			</view>
		</view>
		<!-- 1表示普通订座位-->
		<view class="ek-card">
			<view class="h2">观众信息</view>
			<view class="h2 flex">
				<view class="flex-1">购票人</view>
				<view>{{ info.user_name }}</view>
			</view>
			<view class="h2 flex">
				<view class="flex-1">手机号</view>
				<view>{{ info.phone }}</view>
			</view>
			<view class="h2 flex" v-if="info.child.length > 0">
				<view class="flex-1">身份证号码</view>
				<view>{{ info.child[0].card_number }}</view>
			</view>
		</view>


		<view class='wrapper'>
			<view class='item acea-row row-between'>
				<view>订单号</view>
				<view class='conter'>{{ info.order_sn }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>下单时间</view>
				<view class='conter'>{{ info.add_time|formatDate }}</view>
			</view>
			<view v-if="info.pay_time" class='item acea-row row-between'>
				<view>支付时间</view>
				<view class='conter'>{{ info.pay_time|formatDate }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单状态</view>
				<view v-if="info.status == 0" class="conter">待付款</view>
				<view v-if="info.status == 1" class="conter">已付款</view>
				<view v-if="info.status == 2" class="conter">已使用</view>
				<view v-if="info.status == 3" class="conter">已过期</view>
			</view>
			<view class='item acea-row row-between'>
				<view>支付金额</view>
				<view class='conter'>¥{{ pay_money }}</view>
			</view>
			<view v-if="info.refund_time" class='item acea-row row-between'>
				<view>申请退款时间</view>
				<view class='conter'>{{ info.refund_time|formatDate }}</view>
			</view>
		</view>
		<view class='wrapper'>
			<view class='item acea-row row-between'>
				<view>实际退款金额</view>
				<view class='red'><text class="center_line">¥{{pay_money}}</text>¥{{info.refund_amount}}</view>
			</view>
			<view class='item acea-row row-between'>
				<view class="orange">{{info.refund_config.remark}}</view>
			</view>
		</view>
		<view style="height: 100px"></view>
		<view v-if="info.status == 0" class="footer">
			<text class="font-color-red">￥{{ pay_money }}</text>
			<view class="btn" @click="goCancel">取消订单</view>
			<view class="btn" @click="goPay">立即支付</view>
		</view>
		<view v-if="info.status == 1 && (info.refund_order == 0 || info.refund_order == 3) && info.is_refund == 1" class="footer">
			<view class="flex-1"></view>
			<view class="btn" @click="goRefund">确认退款</view>
		</view>

		<!-- <view v-if="(info.status == 2 || info.status == 3) && (info.refund_order == 2 || info.refund_order)" class="footer">
			<view class="flex-1"></view>
			<view class="btn" @click="delOrder">删除</view>
		</view> -->
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import zbCode from '@/components/zb-code/zb-code.vue'
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		refund_defail,
		reg_refund,
		del_order
	} from "@/api/show_order";

	import {
		ticketPay
	} from "@/api/show";

	export default {
		components: {
			productConSwiper,
			zbCode
		},
		data() {
			return {
				timeRemaining: '00:00',
				item: {},
				info: {
					child: []
				},
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				refund_msg: [],
				day_time: '',
				sub_bill: '',
				order_sn: '',
				id: '',
				timer: null,
				time: '10:00',
				Areahours: '',
				Areaminutes: '',
				Areaseconds: '',
				refunds:''
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.order_sn = options.order_sn;
			this.refunds = options.refunds;
				console.info(options.refunds)
			// this.item = JSON.parse(options.item)
			// this.refund_msg = JSON.parse(options.refund_msg)
			this.init()
		},
		computed: {
			pay_money() {
				return this.info.child.reduce((a, b) => {
					return +a + +b.price
				}, 0)
			}
		},
		methods: {
			delOrder() {
				del_order(this.id).then(res => {
					if (res.status == 200) {
						this.$util.Tips({
							title: res.message,
							icon: 'success'
						})
						uni.$on('update')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 200)
					} else {
						this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			refund() {
				reg_refund({id:this.id,ids:this.refunds}).then(res => {
					if (res.status == 200) {
						this.$util.Tips({
							title: res.message,
							icon: 'success'
						})
						uni.$on('update')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 200)
					} else {
						this.$util.Tips({
							title: res.message,
							icon: 'none'
						})
					}
					console.log(res);
				}).catch(er => {
					this.$util.Tips({
						title: er,
						icon: 'none'
					})
				})
			},
			init() {
				refund_defail({order_sn:this.order_sn,ids:this.refunds}).then(res => {
					let {
						data
					} = res;
					this.info = data;

				})
			},
			goCancel() {
				let _this = this
				uni.showModal({
					title: '取消',
					content: '确定要取消订单吗',
					success: function(res) {
						if (res.confirm) {
							_this.delOrder()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goRefund() {
				let _this = this
				uni.showModal({
					title: '退票',
					content: '确定要退票吗',
					success: function(res) {
						if (res.confirm) {
							_this.refund()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


				// uni.navigateTo({
				// 	url: `/pages/2_development/user/show_order_refund?order_sn=${this.info.order_sn}`
				// })
			},
			goPay() {
				let _this = this
				ticketPay({
					order_sn: this.info.order_sn,
					pay_type: 2
				}).then(res2 => {
					console.log(res2)
					let config = res2.data.result.config
					uni.requestPayment({
						timeStamp: config.timestamp,
						nonceStr: config.nonceStr,
						package: config.package,
						signType: config.signType,
						paySign: config.paySign,
						success: (res) => {
							this.$util.Tips({
								title: '支付成功',
								icon: 'success'
							});
							this.init()
						},
						fail: () => {
							return _this.$util.Tips({
								title: '支付失败'
							});
						},
						complete: (res) => {
							if (res.errMsg == 'requestPayment:cancel') return this.$util.Tips({
								title: '取消支付'
							});
						}
					})
				}).catch(er => {
					_this.$util.Tips({
						title: er
					});
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";
	@import "./style.scss";

	.wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.wrapper .item~.item {
		margin-top: 20rpx;
	}

	.wrapper .item .conter {
		color: #868686;
		width: 460rpx;
		text-align: right;
	}

	.wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 17rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;

	}
	.wrapper .center_line{
		text-decoration: line-through; 
		margin-right: 10rpx;
		color: gray;
	}
	.wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.footer {
		width: 100%;
		height: calc(50px + constant(safe-area-inset-bottom));
		height: calc(50px + env(safe-area-inset-bottom));
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 8rpx;
		padding-bottom: calc(1px + constant(safe-area-inset-bottom));
		padding-bottom: calc(1px + env(safe-area-inset-bottom));

		.price {
			font-size: 28rpx;
			color: #fff;
		}

		.btn {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #e93323;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.state {
		height: 100rpx;
		text-align: center;
		color: #fa6514;
		line-height: 100rpx;
		margin-bottom: 30rpx;
		background: #fff;
		display: flex;
		    align-items: center;
		    justify-content: center;
	}

	.timeout {
		color: #000000;
		    margin-left: 20rpx;
	}

	.bnt {
		margin: 30rpx;
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 80rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;

		.name {
			margin: 20rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.score {
			height: 50rpx;
		}

		.desc {
			margin: 0 30rpx;
			font-size: 24rpx;
			color: #82848f;
			margin-top: 10rpx;
		}

		.shoucang {
			font-size: 18rpx;
			text-align: center;
			color: #666;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
	}

	.notice-title {
		font-size: 28rpx;
		color: #333;
		margin: 30rpx;
		font-weight: bold;
	}

	.content {
		margin: 20rpx 30rpx 0;
	}


	.qrcode {
		width: 40px;
		height: 40px;
	}

	.au-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.au-item {
		border-bottom: 1px dashed #F0F0F0;
		margin-top: 20rpx;
		padding: 20rpx 0rpx;
	}
	.red{
		font-size: 28rpx;
		color: #FF0000;
	}
	.orange{
		font-size: 26rpx;
		color: #fa6514;
	}
</style>
